<template>
  <!-- 		资料编辑 -->
  <view class="pd">
    <uni-list>
      <uni-list-item title="头像" clickable @click="pic">
        <template slot="footer">
          <image
            :src="url"
            style="width: 100rpx; height: 100rpx; border-radius: 50%"
          ></image>
        </template>
      </uni-list-item>

      <uni-list-item title="昵称" clickable>
        <template slot="footer">
          <input
            type="text"
            class="mr"
            v-model="phone"
            style="text-align: right"
          />
          <text class="iconfont icon-bianji1"> </text>
        </template>
      </uni-list-item>

      <uni-list-item title="性别" clickable @click="sexClick">
        <template slot="footer">
          <text class="mr"> {{ sex | sex }} </text>
          <text class="iconfont icon-bianji1"> </text>
        </template>
      </uni-list-item>
      <uni-list-item title="生日" clickable @click="birthdayClick">
        <template slot="footer">
          <picker mode="date" :value="birthday" @change="bindDateChange">
            <view class="uni-input">{{ birthday }}</view>
          </picker>
          <text class="iconfont icon-bianji1"></text>
        </template>
      </uni-list-item>
      <uni-list-item title="情感" clickable @click="emotionClick">
        <template slot="footer">
          <text class="mr"> {{ emotion | emotion }} </text>
          <text class="iconfont icon-bianji1"></text>
        </template>
      </uni-list-item>
      <uni-list-item title="职业账号" clickable @click="joinClick">
        <template slot="footer">
          <text class="mr"> {{ join }} </text>
          <text class="iconfont icon-bianji1"></text>
        </template>
      </uni-list-item>
      <uni-list-item title="家乡" clickable @click="homeClick">
        <template slot="footer">
          <text class="mr"> {{ home }} </text>
          <text class="iconfont icon-bianji1"></text>
        </template>
      </uni-list-item>
    </uni-list>
    <button
      class="mainBg"
      style="border-radius: 200rpx; color: #fff"
      @click="infoClick"
    >
      完成
    </button>
    <mpvue-city-picker
      :themeColor="themeColor"
      ref="mpvueCityPicker"
      :pickerValueDefault="cityPickerValueDefault"
      @onConfirm="onConfirm"
    ></mpvue-city-picker>
  </view>
</template>

<script>
import mpvueCityPicker from "@/components/uni_ui/mpvue-citypicker/mpvueCityPicker.vue";
import { mapState } from "vuex";
import { edituserinfo } from "@/api/api";
export default {
  components: {
    mpvueCityPicker,
  },
  computed: {
    ...mapState(["userInfo"]),
  },
  filters: {
    emotion(value) {
      // let emotions;
      if (value === 0) {
        return "保密";
      } else if (value === 1) {
        return "未婚";
      } else {
        return "已婚";
      }
    },
    sex(value) {
      // let emotions;
      if (value === 0) {
        return "保密";
      } else if (value === 1) {
        return "男";
      } else {
        return "女";
      }
    },
  },
  data() {
    return {
      themeColor: "#007AFF",
      cityPickerValueDefault: [0, 0, 1],
      url: "/static/demo/datapic/1.jpg",
      phone: "",
      sex: "保密",
      birthday: "2022-05-1",
      emotion: "保密",
      join: "保密",
      home: "保密",
      qg: 0,
      sex2: 0,
    };
  },
  onShow() {
    this.cityPickerValueDefault = [0, 0, 1];
    this.url = this.userInfo.userpic;
    this.phone = this.userInfo.username;
    this.sex = this.userInfo.userinfo.sex || "保密";
    this.birthday = this.userInfo.userinfo.birthday || "保密";
    this.emotion = this.userInfo.userinfo.qg || "保密";
    this.join = this.userInfo.userinfo.job || "保密";
    this.home = this.userInfo.userinfo.path || "保密";
    // console.log(this.userInfo.userinfo.emotion);
  },
  methods: {
    // 调用图片
    pic() {
      // 上传头像
      uni.chooseImage({
        count: 1, //默认9
        sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ["album"], //从相册选择
        success: (res) => {
          this.url = res.tempFilePaths[0];
          // 上传图片
          // if (this.$store.state.token) {
          console.log(res.tempFilePaths[0]);
          uni.uploadFile({
            url: "https://ceshi2.dishait.cn/api/v1/edituserpic", //仅为示例，非真实的接口地址
            filePath: this.url,
            name: "userpic",
            header: {
              token: this.$store.state.token,
            },
            success: (uploadFileRes) => {
              let res = uploadFileRes;
              if (res.statusCode === 200) {
                let data = JSON.parse(res.data);

                uni.showToast({
                  title: data.msg,
                  icon: "none",
                });
                this.$store.commit("edituser", {
                  key: "userpic",
                  value: data.data,
                });
                console.log(data);
              }
              // this.$store.commit("edituser",)
            },
            fail: (fail) => {
              console.log(fail);
            },
          });
          // } else {
          //   uni.showToast({
          //     title: "非法token",
          //     icon: "none",
          //   });
          // }
        },
      });
    },
    // 选择性别
    sexClick() {
      let JobArray = ["保密", "男", "女"];
      uni.showActionSheet({
        itemList: JobArray,
        success: (res) => {
          this.sex2 = res.tapIndex;
          this.sex = res.tapIndex;
          console.log(res);
          // this.sex = JobArray[res.tapIndex];
        },
      });
    },
    // 选择生日
    birthdayClick() {
      // this.$refs.calendar.open();
    },
    bindDateChange(e) {
      // console.log(e.detail.value);
      this.birthday = e.detail.value;
    },
    // 选择情感
    emotionClick() {
      let JobArray = ["保密", "未婚", "已婚"];
      uni.showActionSheet({
        itemList: JobArray,
        success: (res) => {
          console.log(res);
          this.qg = res.tapIndex;
          this.emotion = res.tapIndex;
        },
      });
    },
    // 选择职业
    joinClick() {
      let JobArray = ["IT", "教师", "农名"];
      uni.showActionSheet({
        itemList: JobArray,
        success: (res) => {
          console.log(res);
          this.join = JobArray[res.tapIndex];
        },
      });
    },
    // 家乡
    homeClick() {
      this.$refs.mpvueCityPicker.show();
    },
    onConfirm(e) {
      console.log(e);
      this.home = e.label;
    },
    // 点击完成 发送请求 edituserinfo
    async infoClick() {
      let obj = {
        name: this.phone,
        sex: this.sex2,
        qg: this.qg,
        job: this.join,
        birthday: this.birthday,
        path: this.home,
      };
      // 发送请求
      // let res = await edituserinfo(obj);
      // console.log(res);
      edituserinfo(obj)
        .then((res) => {
          console.log(res);
          if (res.statusCode === 400) {
            uni.showToast({
              title: res.data.msg,
              icon: "none",
            });
          } else {
            this.$store.commit("edituserInfo", obj);
            uni.showToast({
              title: "修改成功",
              icon: "none",
            });
            setTimeout(() => {
              uni.navigateBack({});
            }, 500);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style></style>
